<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆包AI流式输出测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .input-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        textarea {
            height: 100px;
            resize: vertical;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
        }
        button:hover {
            background-color: #0056b3;
        }
        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        #result {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #f8f9fa;
            min-height: 100px;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .streaming {
            color: #007bff;
        }
        .error {
            color: #dc3545;
        }
        .success {
            color: #28a745;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>豆包AI流式输出测试</h1>
        <div class="input-group">
            <label for="question">问题：</label>
            <textarea id="question" placeholder="请输入你想问豆包AI的问题...">请用中文介绍一下人工智能的发展历程</textarea>
        </div>
        <div class="input-group">
            <label for="temperature">温度 (0-2)：</label>
            <input type="number" id="temperature" min="0" max="2" step="0.1" value="0.7">
        </div>
        <div class="input-group">
            <label for="max_tokens">最大令牌数 (1-8000)：</label>
            <input type="number" id="max_tokens" min="1" max="8000" value="4000">
        </div>
        <div class="input-group">
            <label for="stream_mode">流式模式：</label>
            <select id="stream_mode">
                <option value="char">逐字符</option>
                <option value="word">逐词</option>
                <option value="chunk">分块</option>
                <option value="complete">完整</option>
            </select>
        </div>
        <button id="submitBtn">开始对话</button>
        <div id="result"></div>
    </div>

    <script>
        document.getElementById('submitBtn').addEventListener('click', function() {
            const question = document.getElementById('question').value;
            const temperature = document.getElementById('temperature').value;
            const maxTokens = document.getElementById('max_tokens').value;
            const streamMode = document.getElementById('stream_mode').value;
            const resultDiv = document.getElementById('result');
            const submitBtn = document.getElementById('submitBtn');
            
            if (!question.trim()) {
                alert('请输入问题');
                return;
            }
            
            // 禁用按钮
            submitBtn.disabled = true;
            submitBtn.textContent = '对话进行中...';
            resultDiv.innerHTML = '<div class="streaming">正在连接豆包AI...</div>';
            
            // 构建请求URL
            const url = `/api/doubao/index`;
            const params = new URLSearchParams({
                question: question,
                temperature: temperature,
                max_tokens: maxTokens,
                stream_mode: streamMode
            });
            
            // 创建EventSource连接
            const eventSource = new EventSource(`${url}?${params}`);
            let fullContent = '';
            
            eventSource.onmessage = function(event) {
                try {
                    const data = JSON.parse(event.data);
                    console.log('Received data:', data);
                    
                    if (data.type === 'init') {
                        resultDiv.innerHTML = '<div class="streaming">豆包AI已连接，正在生成回答...</div>';
                    } else if (data.type === 'content') {
                        fullContent += data.data;
                        resultDiv.innerHTML = `<div class="streaming">${fullContent}</div>`;
                        // 滚动到底部
                        resultDiv.scrollTop = resultDiv.scrollHeight;
                    } else if (data.type === 'processed') {
                        resultDiv.innerHTML = `<div class="success">${data.data}</div>`;
                    } else if (data.type === 'error') {
                        resultDiv.innerHTML = `<div class="error">错误: ${JSON.stringify(data.data)}</div>`;
                        eventSource.close();
                        submitBtn.disabled = false;
                        submitBtn.textContent = '开始对话';
                    } else if (data.type === 'end') {
                        resultDiv.innerHTML += `<div class="success"><br>--- 对话结束 ---</div>`;
                        eventSource.close();
                        submitBtn.disabled = false;
                        submitBtn.textContent = '开始对话';
                    }
                } catch (e) {
                    console.error('Error parsing message:', e);
                }
            };
            
            eventSource.onerror = function(event) {
                console.error('EventSource failed:', event);
                resultDiv.innerHTML = '<div class="error">连接错误，请检查网络或服务器状态</div>';
                eventSource.close();
                submitBtn.disabled = false;
                submitBtn.textContent = '开始对话';
            };
        });
    </script>
</body>
</html>